<template>
  <div>
    <button @click="componentName = 'One'">One</button>
    <button @click="componentName = 'Two'">Two</button>
    <button @click="componentName = 'Three'">Three</button>
  <keep-alive include="One,Two,Three">
    <component :is="componentName"></component>
  </keep-alive>
<!--    <component :is="componentName"></component>-->
<!--    <component :is="componentName"></component>-->

  </div>
</template>


<script>
import One from "@/components/One";
import Two from "@/components/Two";
import Three from "@/components/Three";

export default {
  name:"App",
  components:{
    One,
    Two,
    Three,
  },
  data(){
    return{
      componentName:"One",
    }
  }
}
</script>


<style></style>